<template>
	<view
		:class="pageClass"
		:style="pageStyle"
		v-if="pageReady"
	>
		<moxi-nav :set="navSet"></moxi-nav>

		<view class="orderinfoFrist">
			<!-- 状态展示 -->
			<view class="statusShow">
				<view class="status" v-if="orderinfo.order_type == 1">已完成</view>
				<view class="status" v-if="orderinfo.order_type == 0">待取餐</view>
				<view class="orderNumberShow">
					<view class="orderTableNumber" v-if="isTableNumber">
						<view class="title">桌号</view>
						<view class="number">{{tNum}}</view>
					</view>
					<view class="orderTakeNumber">
						<view class="title">取餐号</view>
						<view class="number">{{orderinfo.code}}</view>
					</view>
				</view>
				<view class="controlOrder">
					<view style="margin-right: 12px;">
						<u-button type="primary"  :color="app_color" style="border-color: #DEDEDE;" @click="another()">
							<text style="font-size: 12px; padding: 4px 6px;">再来一单</text>
						</u-button>
					</view>
					<view style="margin-right: 12px;" v-if="orderinfo.order_type !== 1">
						<u-button type="primary" :plain="true" color="#999999" @click="myorder()">
							<text style="font-size: 12px; padding: 4px 6px;">我的订单</text>
						</u-button>
					</view>
					<view v-if="orderinfo.order_type === 1 && orderinfo.content == []">
						<u-button type="primary" :plain="true" color="#999999" @click="evalution(orderinfo.order_id)">
							<text style="font-size: 12px; padding: 4px 6px;">立即评价</text>
						</u-button>
					</view>
				</view>
			</view>
			<!-- 订单商品展示 -->
			<view class="productDetails">
				<view class="top">
					<view class="address">{{merchantname}}</view>
					<view class="moreFunction">
						<!-- 电话 -->
						<view style="margin-right: 12px;">
							<u-icon name="phone-fill" :color="app_color" size="16px" @click="call"></u-icon>
						</view>
						<!-- 导航 -->
						<view>
							<u-icon name="map-fill" :color="app_color" size="16px" @click="mapClick"></u-icon>
						</view>
					</view>
				</view>
				<view class="showGoodsList" v-for="item in goods">
				
					<view class="item">
						<view style="width: 80px; height: 80px; margin-right: 8px;"><u--image
							:src="item.img"
							radius="6"
							height="80px"
							width="80px"
						></u--image></view>
						<view class="itemInfo">
							<view class="goods_name">{{item.name}}</view>
							<view v-for="item2 in item.specs" v-if="item2 != undefined">
								<view class="goods_guige">{{item2.groupName}}：{{item2.name}}</view>
							</view>
							<view class="goods_price">¥{{item.price}}</view>
							<view class="goods_count">x{{item.count}}</view>
							
						</view>
					</view>
					
				</view>
				<view class="bottom">
					<view style="color: #999999;font-size: 14px;">合计:</view>
					<view class="goodsCountMenony">
						￥
						<text style="font-size: 18px;">{{orderinfo.all_price}}</text>
					</view>
				</view>
			</view>

			<!-- 备注展示 -->
			<view class="remark">
				<view class="title">用餐信息</view>
				<view class="remark-item">
					<view>就餐方式</view>
					<view v-if="orderinfo.packback === 0">堂食</view>
					<view v-if="orderinfo.packback === 1">打包</view>
				</view>
				<view class="remark-item" v-if="isTableNumber">
					<view>桌号</view>
					<view>A16</view>
				</view>
				<view class="remark-item">
					<view>备注</view>
					<view v-if="orderinfo.desc != null">{{orderinfo.desc}}</view>
					<view v-else ></view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="orderinfo" style="margin-bottom: 20px;">
				<view class="orderInfo_title">订单信息</view>
				<view class="orderInfo-item">
					<view>订单编号</view>
					<view style="display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;">
						<text style="margin-right: 8px;">{{orderinfo.order_id}}</text>
						<u-button type="primary" color="#F5F5F5" style="width: 40px;height: 21px;border-radius: 2px;" @click="copyContent">
							<text style="color: #999999; font-size: 12px; white-space: nowrap;">复制</text>
						</u-button>
					</view>
				</view>
				<view class="orderInfo-item">
					<view>下单时间</view>
					<view>{{formatSecondTimestamp(orderinfo.c_time)}}</view>
				</view>
				<view class="orderInfo-item">
					<view>支付方式</view>
					<view v-if="orderinfo.pay_type === 'yue'">余额支付</view>
					<view v-if="orderinfo.pay_type === 'weixin'">微信支付</view>
					<view v-if="orderinfo.pay_type === 'zhifubao'">支付宝支付</view>
				</view>
				<view class="orderInfo-item">
					<view>支付金额</view>
					<view>{{orderinfo.paymoney}}</view>
				</view>
			</view>
		</view>

		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 判断是否堂食
			isTableNumber: false,
			merchantname:'',
			phone:'',
			status:'',
			goods:[],
			orderinfo:'',
			mid:0,
			merchant:{
				'la':0,
				'ln':0
			},
			tNum:''
		}
	},
	onLoad(option){
		console.log(option);
		//接收参数
		const orderId = option.order_id;
		this.tNum = option.tNum;
		this.getOrderInfo(orderId);	
		this.getmerchantinfo(option.mid);
	},
	methods: {
		getmerchantinfo(mid){
			this.moxiPost(
			"/plugin/order/index/merchant/getaddress",
			{'mid':mid},
			(res)=>{
				this.merchantname = res.data.name;
				this.merchant.la = res.data.la;
				this.merchant.ln = res.data.ln;
				this.address = res.data.address;
				}
			)
		},
		//地图导航
		mapClick() {
			if (!this.merchant.ln || !this.merchant.la) {
				uni.showToast({
					title: '暂无位置信息',
					icon: 'none'
				});
				return;
			}
				// console.log(this.merchant);
				// return false;
			const latitude = Number(this.merchant.la);
			const longitude = Number(this.merchant.ln);
			const name = this.address || '目的地';
			// #ifdef MP-ALIPAY
			my.openLocation({
				latitude,
				longitude,
				name,
				address: this.address || '',
				success: () => console.log('支付宝地图打开成功'),
				fail: (err) => console.error('支付宝地图打开失败', err),
			});
			// #endif
		
			// #ifndef MP-ALIPAY
			uni.openLocation({
				latitude,
				longitude,
				name,
				success: () => console.log('地图打开成功'),
				fail: (err) => console.error('地图打开失败', err),
			});
			// #endif
		},
		//打电话
		call(){
			// console.log(this.phone);
			uni.makePhoneCall({
				phoneNumber: this.phone
			});
		},
		//复制
		copyContent(){
			// 调用 uni.setClipboardData 方法将内容复制到剪贴板
			      uni.setClipboardData({
			        // 要复制的数据
			        data: this.orderinfo.order_id,
			        success() {
			          // 复制成功的提示信息
			          uni.showToast({
			            title: '复制成功',
			            icon: 'success'
			          });
			        },
			        fail() {
			          // 复制失败的提示信息
			          uni.showToast({
			            title: '复制失败',
			            icon: 'none'
			          });
			        }
			      });
		},
		//再来一单
		another(){
			const selectedData = uni.getStorageSync('plugin_order_selectedGoods');
			//解码
			const dd = selectedData;
			// return false;
			//组装需要的数据
			const mid = uni.getStorageSync('selected')
			//要区分h5 uniapp
			// #ifdef MP-ALIPAY || MP-WEIXIN
				uni.navigateTo({
					url: '/plugin_order/orderconfirm?mid='+ mid
				});
			// #endif
			// #ifndef MP-ALIPAY || MP-WEIXIN
				uni.navigateTo({
					url: '/plugin_order/orderconfirm?mid='+ mid
				});
			// #endif
			
		},
		getOrderInfo(orderId){
			// console.log(orderId);
			this.moxiPost(
			'/plugin/order/user/user/orderinfo',{'orderid':orderId},(res)=>{
				this.merchantname = res.data.merchantname.name;
				this.phone = res.data.merchantname.tel;
				this.status = res.data.orderdata.status;
				const goodsItem = JSON.parse(res.data.orderdata.info);
				goodsItem.forEach((item)=>{
					
					this.goods.push(item)
				})
				this.orderinfo = res.data.orderdata;
				console.log('orderdataa:',res.data.orderdata);
				if(this.orderinfo.tid !== 0){
					this.isTableNumber = true;
				}else{
					this.isTableNumber = false;
				}
				// console.log(this.goods)
			}
			);
		},
		myorder(){
			uni.navigateTo({
				url:'/plugin_order/order'
			})
		},
		formatSecondTimestamp(timestamp) {
		      // 将秒级时间戳转换为毫秒级，因为 Date 构造函数接受毫秒级时间戳
		      const date = new Date(timestamp * 1000);
		      const year = date.getFullYear();
		      // 月份从 0 开始计数，所以要加 1，并确保为两位数
		      const month = String(date.getMonth() + 1).padStart(2, '0');
		      // 确保日期为两位数
		      const day = String(date.getDate()).padStart(2, '0');
		      // 确保小时为两位数
		      const hours = String(date.getHours()).padStart(2, '0');
		      // 确保分钟为两位数
		      const minutes = String(date.getMinutes()).padStart(2, '0');
		      // 确保秒数为两位数
		      const seconds = String(date.getSeconds()).padStart(2, '0');
		      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		    },
			evalution(orderid){
				// const orderid = orderid;
				// console.log(orderid);
				uni.navigateTo({
					url:'/plugin_order/evaorder?orderid=' + orderid
				})
			}
	}
}
</script>

<style scoped lang="scss">
.orderinfoFrist {
	width: 100%;
}

.statusShow {
	background-color: #fff;
	border-radius: 6px;
	padding: 18px 0;
}

.statusShow .status {
	width: 100%;
	height: 29px;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
}
.statusShow .orderNumberShow {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: nowrap;

	margin-top: 16px;

	position: relative;
}

.statusShow .orderNumberShow .orderTableNumber,
.statusShow .orderNumberShow .orderTakeNumber {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

.statusShow .orderNumberShow .orderTableNumber::before {
	content: "";
	position: absolute;
	width: 1px;
	height: 36px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background-color: #f5f5f5;
}

.statusShow .orderNumberShow .title {
	font-size: 14px;
	color: #3d3d3d;
	letter-spacing: 0.32px;
	line-height: 22px;
	height: 22px;
}

.statusShow .orderNumberShow .number {
	margin-top: 16px;
	letter-spacing: 0.32px;
	color: #3d3d3d;
	font-size: 24px;
	height: 22px;
	line-height: 22px;
}

.statusShow .controlOrder {
	margin-top: 16px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.productDetails {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	margin-top: 12px;
	border-radius: 6px;
	padding: 12px;
}

.productDetails .top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;

	padding-bottom: 12px;
	border-bottom: 1px solid #f6f6f6;
}

.productDetails .top .moreFunction {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}

.productDetails .top .address {
	font-size: 16px;
	color: #3d3d3d;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.productDetails .top .moreFunction > view {
	width: 24px;
	height: 24px;
	background-color: #f5f5f5;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.productDetails .showGoodsList {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 12px 0;
}

.productDetails .showGoodsList .item {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.productDetails .showGoodsList .item .itemInfo {
	padding: 4px 0;
	position: relative;
	flex: 1;
	overflow: hidden;
}

.productDetails .showGoodsList .item .itemInfo .goods_name {
	min-height: 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0.32px;
	color: #3d3d3d;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 12px;
}

.productDetails .showGoodsList .item .itemInfo .goods_guige {
	min-height: 22px;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 0.32px;
	color: #999999;
	overflow: hidden;
}

.productDetails .showGoodsList .item .itemInfo .goods_price {
	min-height: 22px;

	font-size: 14px;
	line-height: 22px;
	display: flex;
	align-items: center;
	letter-spacing: 0.32px;
	color: #3d3d3d;
}

.productDetails .showGoodsList .item .itemInfo .goods_count {
	min-height: 22px;

	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	display: flex;
	align-items: center;
	letter-spacing: 0.32px;
	color: #999999;

	position: absolute;
	right: 0;
	bottom: 0;
}

.productDetails .bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}

.productDetails .bottom .goodsCountMenony {
	color: #3d3d3d;
	font-size: 12px;
	font-weight: 500;
}

.remark {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 6px;
	margin-top: 12px;
	padding: 12px;
	white-space: nowrap;
}

.remark .title {
	min-height: 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	display: flex;
	align-items: center;
	letter-spacing: 0.32px;
	color: #3d3d3d;

	padding-bottom: 12px;
	border-bottom: 1px solid #f6f6f6;
}

.remark .remark-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	padding-top: 12px;

	min-height: 22px;

	font-size: 14px;
	font-weight: normal;
	line-height: 22px;
	letter-spacing: 0.32px;
	color: #999999;
}

.orderinfo {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-radius: 6px;
	margin-top: 12px;
	padding: 12px;
	white-space: nowrap;
}

.orderinfo .orderInfo_title {
	min-height: 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	display: flex;
	align-items: center;
	letter-spacing: 0.32px;
	color: #3d3d3d;

	padding-bottom: 12px;
	border-bottom: 1px solid #f6f6f6;
}

.orderinfo .orderInfo-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	padding-top: 12px;

	min-height: 22px;

	font-size: 14px;
	font-weight: normal;
	line-height: 22px;
	letter-spacing: 0.32px;
	color: #999999;
}
</style>
